<template>
  <!-- 选择机构/人员 -->
  <section class="component choose-distribution">
    <div class="row">
      <div class="col-span-4 department-tree-wrapper">
        <department-tree
          :departmentData="departmentData"
          @onCurrentChange="getCheckedNodes"
          ref="department-tree"
          v-model="currentDept"
        ></department-tree>
      </div>
      <data-box
        :data="userDataSet"
        :page="pageService"
        :selectionList.sync="display"
        @onPageChange="onPageChange"
        class="col-span-8"
        ref="data-box"
      >
        <template slot="columns">
          <el-table-column
            :min-width="$helper.getColumnWidth(3)"
            label="用户名"
            prop="userName"
          ></el-table-column>
          <el-table-column
            :min-width="$helper.getColumnWidth(3)"
            label="姓名"
            prop="realName"
          ></el-table-column>
          <el-table-column
            :min-width="$helper.getColumnWidth(3)"
            label="所属机构"
            prop="deptName"
          ></el-table-column>
        </template>
      </data-box>
    </div>

    <div style="text-align:center;margin-top:30px;">
      <el-button @click="close">取消</el-button>
      <el-button @click="next" v-if="allotType === 'COLLECTOR'">确定</el-button>
      <el-button @click="submit" v-else>确定</el-button>
    </div>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

import DepartmentTree from "~/components/system-manage/department-tree.vue";
import { Prop, Emit } from "vue-property-decorator";
import { Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { UserService } from "~/services/management-service/user.service";
import { namespace, Getter } from "vuex-class";
import { CASE_CHANNEL } from "~/config/enum.config";

const AllotModule = namespace("case-allot");

@Component({
  components: {
    DepartmentTree
  }
})
export default class ChooseDistribution extends Vue {
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(UserService) private userService: UserService;

  @Getter private visitDepartmentData;
  @Getter private callDepartmentData;
  @Getter private legalDepartmentData;

  @AllotModule.State private category;
  @AllotModule.Mutation private updateCategory;
  @AllotModule.Mutation private updateDeptIds;
  @AllotModule.Mutation private updateUserIds;
  @AllotModule.Mutation private updateCaseIds;
  @AllotModule.Getter private distributeModel;

  private selectionList: any[] = [];
  private userDataSet: any[] = [];
  private nowNode: any = null;
  private distributionData: any = {};
  private submitLoading: boolean = false;

  private collectionType = "";
  private item: any = {};
  private currentDept: any = "";
  private departmentData = null;

  @Prop({ type: String }) private distributeType: string;
  @Prop({ type: String }) private allotType: string;

  @Emit("refreshList")
  private emitRefreshList() {}
  @Emit("close")
  private emitClose() {
    this.userDataSet = [];
    this.nowNode = null;
    this.currentDept = "";
    this.departmentData = null;
  }
  @Emit("success")
  private getchooseData(val, dept) {}
  @Emit("successDept")
  private getDeptIds(val) {}

  private get display() {
    return this.allotType === "DEPARTMENT" ? "" : this.selectionList;
  }

  private set display(v: any) {
    this.selectionList = v;
  }

  // private get currentDept() {
  //   return this.distributeModel.deptIds[0];
  // }

  // private set currentDept(val) {
  //   this.updateDeptIds(val.id);
  //   this.refreshData(val.deptCode);
  // }

  private getDepartmentData() {
    if (this.distributeType === "TEL") {
      this.departmentData = this.callDepartmentData;
    } else if (this.distributeType === "VISIT") {
      this.departmentData = this.visitDepartmentData;
    } else if (this.distributeType === "LEGAL") {
      this.departmentData = this.legalDepartmentData;
    }
  }

  /**
   * 获取当前树选择项
   */
  private getCheckedNodes(item) {
    this.item = item;
    if (this.nowNode && item.deptCode === this.nowNode.deptCode) {
      return;
    }
    this.currentDept = item;
    this.updateDeptIds(item.id);
    this.refreshData(item.deptCode);
  }

  //按机构分配
  private submit() {
    if (this.distributeModel.deptIds.length === 0) {
      this.$message.error("请选择部门");
      return;
    }
    this.getDeptIds(this.item);
  }

  private refreshData(code: string) {
    const model = {
      deptCode: code,
      caseSwitch: ""
    };
    this.userService
      .getAllUsers(model, this.pageService)
      .subscribe(data => (this.userDataSet = data));
  }

  private next() {
    this.getchooseData(this.selectionList, this.item);
    this.close();
  }

  private onPageChange() {
    this.refreshData(this.item.deptCode);
  }

  private success() {
    this.$message.success("分配成功");
    this.close();
  }

  private close() {
    this.emitRefreshList();
    this.emitClose();
  }
}
</script>
<style lang="less" scoped>
.component.choose-distribution {
  .department-tree-wrapper {
    margin-top: 10px;
    height: 360px;
    overflow-y: auto;
    border: solid 1px #f2f2f2;
  }
}
</style>
